<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_dhzx2yy589.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_pi6wkhyjs2.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_d4wfn85ed59.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2980973_r30d0m6kb9.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2977887_4hd4myhs0ck.css">
    <link rel="stylesheet" href="css/xaingqing.css">
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/dibu.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/axios.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="dingbu">
        <div class="ding">
            <a href="index.html">
                <div class="iconfont icon-shouye"></div>
            </a>
            <a href="index.html">
                <div class="shouye">E宠首页</div>
            </a>
            <div class="songzhi">送至：</div>
            <div class="dizhi">
                <div class="di1">郑州</div>
                <div class="di2"> <img src="img/jiantou.png" alt=""></div>
            </div>
            <span id="jiuzhu" class="iconfont icon-minzhengtubiao1-08"></span>
            <span class="pinzhi">E宠就是正品</span>


            <div class="wenti">问题反馈</div>
            <div class="pion">
                <span id="pion1" class="iconfont icon-shouji"></span>
                <span class="pion2">手机版</span>
                <div class="erweima"><img src="img/code.png" alt=""></div>
            </div>
            <div class="shoucang">
                <div class="cang3"></div>
                <div class="cang2">收藏</div>
                <div id="cang1" class="iconfont icon-shoucang"></div>
                <!-- <ul>
                    <li>我的收藏</li>
                </ul> -->
            </div>
            <div id="shoucang2" class="shoucang">
                <div class="cang3"></div>
                <div class="cang2">我的E宠</div>
                <div id="cang1" class="iconfont icon-wode-active"></div>
            </div>
            <a href="gouwucar.html">
                <div class="car">
                    <div class="car2">购物车</div>
                    <div id="car1" class="iconfont icon-gouwuchefill"></div>
                </div>
            </a>
            <div id="zzcc" class="zhuce">[注册]</div>
            <div id="dl" class="denglu">[登录]</div>
        </div>
    </div>
    <!-- 搜索 -->
    <div class="daohangkuai">
        <a href="index.html">
            <div class="logo">
                <img src="img/epet-logo.png" alt="">
            </div>
        </a>
        <div class="sousuo">
            <input id="shuru" type="text">
            <input id="sou" type="button" value="搜索">

            <div class="re">
                <span class="re1">热门搜索:&nbsp;&nbsp;&nbsp;<span>周期配送</span></span>
                <span class="re2">zeal鲜牛乳低至5折</span>
                <span class="re2">精选冻干双拼粮</span>
            </div>
        </div>
        <a href="gouwucar.html">
            <div class="gouwu">购物车</div>
        </a>
        <div class="caidan">
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;品牌特卖</div>
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;潮品视频</div>
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;小剧场</div>
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;E宠课堂</div>
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;萌爪联盟</div>
            <div class="cai1"><img src="img/gutou.png" alt="">&nbsp;&nbsp;清仓特价</div>
        </div>
    </div>
    <div class="xian1"></div>

    <!-- 放大镜 -->
    <div class="asdasd">
        <!-- <div class="bbbbb">
        <div class="gdt"></div>
        <div class="leftBox">
            <div class="normalBox w">
                <div class="w" id="n"><img src="img/normal1.jpg"></div>
                <div class="w"><img src="img/normal2.jpg"></div>
                <div class="w"><img src="img/normal3.jpg"></div>
                <div class="w"><img src="img/normal4.jpg"></div>
                <div class="w"><img src="img/normal5.jpg"></div>
                <div class="moveBox"></div>
            </div>
            <div class="botBox">
                <ul>
                    <li class="bord"><img src="img/small1.jpg"></li>
                    <li><img src="img/small2.jpg"></li>
                    <li><img src="img/small3.jpg"></li>
                    <li><img src="img/small4.jpg"></li>
                    <li><img src="img/small5.jpg"></li>
                </ul>
            </div>
        </div>
        <div class="magBox">
            <ul>
                <li class="m"><img src="img/normal1.jpg"></li>
                <li><img src="img/normal2.jpg"></li>
                <li><img src="img/normal3.jpg"></li>
                <li><img src="img/normal4.jpg"></li>
                <li><img src="img/normal5.jpg"></li>
            </ul>
        </div>

        <div class="xiangqing">
            <div class="xiangqing1">巴西原装进口 淘淘 力派均衡系列中大型犬成犬粮 15kg（金毛 拉布拉多）</div>
            <div class="xiangqing2">调节泪腺分泌 强健体态 保护关节 调理肠胃 滋养皮肤</div>
            <div class="xiangqing3">活动价：<span class="x3-1">￥</span> <span class="x3-2">629</span> </div>
            <div class="xiangqing4">
                <div class="x4-1">
                    <div class="x4-1-1"></div>
                    <div class="x4-1-2">正品保证</div>
                </div>
                <div class="x4-2">
                    <div class="x4-2-1"></div>
                    <div class="x4-1-2">99元包邮</div>
                </div>
                <div class="x4-3">
                    <div class="x4-3-1"></div>
                    <div class="x4-1-2">30天退货</div>
                </div>
            </div>
            <div class="xian2"></div>


            <div class="xiangqing5">
                <div class="x5-2">我要买</div>
                <div class="x5-1">
                   <button type="button" id="jian1" class="jian">-</button>
                   <input type="text" id="zhi1" class="zhi" value="0" placeholder="1">
                    <button type="button" id="jia1" class="jia">+</button>
                </div>
                <div class="x5-2">份</div>
            </div>
            <button type="button" id="btn" class="xiangqing6">加入购物车</button>
        </div> 

    </div> -->
    </div>
    <div id="di" class="dibu">
        <div class="dibu1">
            <div class="dibu2">
                <div class="dibu2-1"></div>
                <div class="dibu2-2">正品保障</div>
            </div>
            <div class="dibu3">
                <div id="dd" class="dibu2-1"></div>
                <div class="dibu2-2">品类丰富</div>
            </div>
            <div class="dibu3">
                <div id="ddd" class="dibu2-1"></div>
                <div class="dibu2-2">优质服务</div>
            </div>
            <div class="dibu3">
                <div id="dddd" class="dibu2-1"></div>
                <div class="dibu2-2">科学养宠</div>
            </div>
            <div class="dibu3">
                <div id="ddddd" class="dibu2-1"></div>
                <div class="dibu2-2">E宠公益</div>
            </div>
            <div id="shier" class="dibu3">
                <div id="dddddd" class="dibu2-1"></div>
                <div class="dibu2-2">爱宠12年</div>
            </div>
        </div>
        <div class="dixian"></div>
        <div class="dibu4">
            <div class="dog"><img src="img/dog_phone.gif" alt=""></div>
            <div class="dibu4-1">
                <div class="dibu4-1-1">售后电话：</div>
                <div class="dibu4-1-2">4008889200<div class="dibu4-1-2-1">「免长途费」</div>
                </div>
                <div class="dibu4-1-3">023-68851700</div>
                <div class="dibu4-1-4">服务时间：09:00--18:30（周一到周日）</div>
            </div>
            <div class="dibu4-2">
                <div class="dibu4-1-1">购物指南</div>
                <div class="dibu4-2-1">新人优惠</div>
                <div class="dibu4-2-2">购物问题</div>
                <div class="dibu4-2-2">支付问题</div>
            </div>
            <div class="dibu4-3">
                <div class="dibu4-1-1">售后服务</div>
                <div class="dibu4-2-1">退换货政策</div>
                <div class="dibu4-2-2">退款说明</div>
                <div class="dibu4-2-2">售后问题</div>
            </div>
            <div class="erweima1">
                <div class="zi">扫描关注E宠</br>商城微信</div>
                <div class="ma"><img src="img/code.png" alt=""></div>
            </div>
            <div class="erweima2">
                <div class="zi">扫描下载APP</br>下单更优惠</div>
                <div class="ma"><img src="img/app-code.jpg" alt=""></div>
            </div>
        </div>
        <div class="dibu5">
            <div class="dibu5-1">
                <div class="dibu5-1-1">关于我们</div>
                <div class="dibu5-1-2">
                    <div class="weibo"></div>
                    <div class="weibo1">E宠商城</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weixin"></div>
                    <div class="weibo1">E宠商城</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="baidu"></div>
                    <div class="weibo1">E宠商城百家号</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="toutiao"></div>
                    <div class="weibo1">E宠说</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">E宠公益</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">联系我们</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">公司地址</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">应急响应</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">仓储中心</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">用户协议</div>
                </div>
                <div class="dibu5-1-2">
                    <div class="weibo1">易宠科技</div>
                </div>
            </div>
        </div>
        <div class="dibu6">
            <div class="dibu6-1"><img src="img/12315.png" alt=""></div>
            <div class="dibu6-2"><img src="img/baiq.png" alt=""></div>
            <div class="dibu6-2"><img src="img/wsls.png" alt=""></div>
            <div class="dibu6-2"><img src="img/sfqy.png" alt=""></div>
            <div class="dibu6-2"><img src="img/yxqy.png" alt=""></div>
            <div class="dibu6-2"><img src="img/bhdw.png" alt=""></div>
            <div class="dibu6-2"><img src="img/sjws.png" alt=""></div>
        </div>
        <div class="dibu7">
            <div class="dibu7-1">渝ICP备10002905号-1</div>
            <div class="dibu7-2">渝ICP备10002905号-3</div>
            <div class="dibu7-2">营业执照</div>
            <div class="dibu7-2">兽药经营许可证</div>
            <div class="dibu7-3">增值电信业务经营许可证：渝B2-20140042 Copyright © 2007-2021 epet.com</div>
            <div class="dibu7-3">重庆易宠科技有限公司</div>
        </div>
    </div>


    <div style="clear: both;"></div>


    <script>
        // <!-- 放大镜 -->




        // 渲染详情页

        let api = "http://jx.xuzhixiang.top/ap/api/detail.php";
        let x = new URLSearchParams(location.search);
        console.log(x);
        let id = x.get("pid");

        axios.get(api, {
            params: {
                id
            }
        }).then((v) => {
            let data = v.data.data;
            console.log(data);
            let spxq = "";
            spxq += `
            <div class="bbbbb">
        <div class="gdt"></div>
        <div class="leftBox">
            <div class="normalBox w">
                <div class="w" id="n"><img src="${data.pimg}"></div>
                <div class="w"><img src="${data.pimg}"></div>
                <div class="w"><img src="${data.pimg}"></div>
                <div class="w"><img src="${data.pimg}"></div>
                <div class="w"><img src="${data.pimg}"></div>
                <div class="moveBox"></div>
            </div>
            <div class="botBox">
                <ul>
                    <li class="bord"><img src="${data.pimg}"></li>
                    <li><img src="${data.pimg}"></li>
                    <li><img src="${data.pimg}"></li>
                    <li><img src="${data.pimg}"></li>
                    <li><img src="${data.pimg}"></li>
                </ul>
            </div>
        </div>
        <div class="magBox">
            <ul>
                <li class="m"><img src="${data.pimg}"></li>
                <li><img src="${data.pimg}"></li>
                <li><img src="${data.pimg}"></li>
                <li><img src="${data.pimg}"></li>
                <li><img src="${data.pimg}"></li>
            </ul>
        </div>

        <div class="xiangqing">
            <div class="xiangqing1">${data.pname}</div>
            <div class="xiangqing2">${data.pdesc}</div>
            <div class="xiangqing3">活动价：<span class="x3-1">￥</span> <span class="x3-2"> ${data.pprice}</span> </div>
            <div class="xiangqing4">
                <div class="x4-1">
                    <div class="x4-1-1"></div>
                    <div class="x4-1-2">正品保证</div>
                </div>
                <div class="x4-2">
                    <div class="x4-2-1"></div>
                    <div class="x4-1-2">99元包邮</div>
                </div>
                <div class="x4-3">
                    <div class="x4-3-1"></div>
                    <div class="x4-1-2">30天退货</div>
                </div>
            </div>
            <div class="xian2"></div>


            <div class="xiangqing5">
                <div class="x5-2">我要买</div>
                <div class="x5-1">
                   <button type="button" id="jian1" class="jian" onclick="reduceNum(this,${data.pid})">-</button>
                   <input type="text" id="zhi1" class="zhi" value="1" placeholder="1">
                    <button type="button" id="jia1" class="jia" onclick="addNum(this,${data.pid})">+</button>
                </div>
                <div class="x5-2">份</div>
            </div>
            <button type="button" id="btn" class="xiangqing6">加入购物车</button>
        </div> 

    </div>
                    `;
            // 调用模板字符串
            document.querySelector(".asdasd").innerHTML = spxq;

        }).then(function () {
            $(function () {
                var sdBoxW = $('.moveBox').css('width');
                sdBoxW = parseInt(sdBoxW); //移动层的宽度
                var magBoxW = $('.magBox').css('width');
                magBoxW = parseInt(magBoxW); //图片放大层的宽度
                var normalBoxW = $('.normalBox').css('width');
                normalBoxW = parseInt(normalBoxW); //事件绑定层的宽度
                var num = 0; //存放下标
                //找出放大图片的比例(核心)
                var scale = magBoxW / sdBoxW;
                //移入normalBox盒子
                $('.normalBox').hover(function () {
                    $('.moveBox').css('display', 'block');
                    $('.magBox').css('display', 'block');
                }, function () {
                    $('.moveBox').css('display', 'none');
                    $('.magBox').css('display', 'none');
                });
                //3、移入leftBox层
                $('.leftBox').mouseover(function () {
                    //给放大的图片和图片层设置宽度；
                    $('.magBox ul li img').css('width', scale * normalBoxW + 'px');
                    $('.magBox ul li').css({
                        'width': scale * normalBoxW + 'px',
                        'height': scale * normalBoxW + 'px'
                    })
                });
                //4、设置放大倍数
                var n = 1;

                function sty() {
                    $('.moveBox').css({
                        'width': 200 / n + 'px',
                        'height': 200 / n + 'px'
                    });
                    $('.multiple').html(n);
                    scale = magBoxW / (sdBoxW / n);
                }
                $('.btn1').click(function () {
                    n++;
                    sty()
                });
                $('.btn2').click(function () {
                    if (n == 1) {
                        return;
                    } else {
                        n--;
                        sty()
                    }
                });
                //1、移入缩小图关联
                $('.botBox ul li').attr('index', function (i, e) {
                    return i;
                });
                $('.botBox ul li').mouseover(function () {
                    if ($(this).attr('class') == 'bord') {
                        return; //跳过第一个
                    } else {
                        $(this).attr('class', 'bord').siblings().removeAttr('class');
                        var index = $(this).attr('index');
                        //联动normal和magBox中的图片
                        $('.normalBox .w').eq(index).attr('id', 'n').siblings().removeAttr(
                            'id');
                        $('.magBox ul li').eq(index).attr('class', 'm').siblings().removeAttr(
                            'class');
                        num = index;
                    }
                });
                //2、鼠标在移动层移动
                $('.normalBox').mousemove(function (e) {
                    var offset = $(this).offset();
                    var X = e.pageX - offset.left - $('.moveBox').width() / 2;
                    var Y = e.pageY - offset.top - $('.moveBox').height() / 2;
                    if (X <= 0) {
                        X = 0;
                    } else if (X > $(this).width() - $('.moveBox').width()) {
                        X = $(this).width() - $('.moveBox').width();
                    }
                    if (Y <= 0) {
                        Y = 0;
                    } else if (Y > $(this).height() - $('.moveBox').height()) {
                        Y = $(this).height() - $('.moveBox').height();
                    }
                    $('.moveBox').css('left', X + 'px');
                    $('.moveBox').css('top', Y + 'px');
                    $('.magBox ul li').eq(num).css('left', -X * scale + 'px');
                    $('.magBox ul li').eq(num).css('top', -Y * scale + 'px');
                });
            })
            let jian = document.getElementById("jian1");
            let jia = document.getElementById("jia1");
            let zhi = document.getElementById("zhi1");
            let btn = document.getElementById("btn1");
            jian.onclick = function () {
                zhi.value--;
                if (zhi.value < 1) {
                    zhi.value = 1;
                }
            }
            jia.onclick = function () {
                zhi.value++;
            }
            zhi.onblur = function () {
                if (zhi.value < 1) {
                    zhi.value = 1;
                }
            }


            let zxr = document.getElementById("btn");
            console.log(zxr);
            console.log(zhi.value);
            zxr.onclick = function () {
                $.ajax({
                    url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
                    type: "get",
                    data: {
                        uid: localStorage.getItem("uid"),
                        pid: id,
                        pnum: zhi.value
                    },
                    success: function (data) {
                        alert("添加成功");
                        console.log(data);
                    }
                });
            }

        });

        let denglu = document.getElementById('dl');
        let username3 = localStorage.getItem("username");
        if (username3) {
            denglu.innerText = username3;
        }
    </script>
</body>

</html>